class Magnifier{
	constructor(newSmallBox,newBigBox,newMask) {
	    this.smallbox = newSmallBox;
		this.bigbox = newBigBox;
		this.mask = newMask;
	}
	onmouseover(){
		let that = this;
		this.smallbox.onmouseover = function(){
			that.bigbox.style.display = "block";
			that.mask.style.display = "block";
		}
	}
	onmouseout(){
		let that = this;
		this.smallbox.onmouseout = function(){
			that.bigbox.style.display = "none";
			that.mask.style.display = "none";
		}
	}
	onmousemove(){
		let that = this;
		this.smallbox.onmousemove = function(evt){
			let e = evt||event;
			let x = e.offsetX - that.smallbox.offsetLeft - that.mask.offsetWidth/2;
			let y =  e.offsetY - that.smallbox.offsetTop- that.mask.offsetHeight/2;
			if(x<0){
				x=0;
			}
			let maxX = that.smallbox.offsetWidth - that.mask.offsetWidth;
			if(x>maxX){
				x = maxX;
			}
			if(y<0){
				y=0;
			}
			let maxY = that.smallbox.offsetHeight - that.mask.offsetHeight;
			if(y>maxY){
				y = maxY;
			}
			that.mask.style.left = x+"px";
			that.mask.style.top = y +"px";
			let left = that.bigbox.offsetWidth*x/that.mask.offsetWidth;
			let top = that.bigbox.offsetHeight*y/that.mask.offsetHeight;
			that.bigbox.style.backgroundPositionX = -left+"px";
			that.bigbox.style.backgroundPositionY = -top+"px";
			
		}
	}
}